<template>
    <div class="layout">
        <div class="user">
            <div class="user_info">
                <div class="user_info_left">
                    <div class="avatar">
                        <img src="@/assets/image/account/avatar.png" alt="" />
                    </div>
                    <div class="info">
                        <div class="info_name">
                            <p v-if="state.userInfo.base_info.user_name" class="name">
                                {{ state.userInfo.base_info.user_name }}
                            </p>
                            <p v-else class="name">未设置</p>
                            <div v-if="false" class="qw_icon">
                                <img src="@/assets/image/account/qw.png" alt="" />
                            </div>
                        </div>
                        <p v-if="state.userInfo.base_info.account" class="info_phone">
                            {{ state.userInfo.base_info.account }}
                        </p>
                        <p v-else class="info_phone">未设置</p>
                        <div class="info_role">
                            <div class="info_role_icon">
                                <img src="@/assets/image/account/role_icon.png" alt="" />
                            </div>
                            <p v-if="state.userInfo.base_info.role_name" class="info_role_name">
                                {{ state.userInfo.base_info.role_name }}
                            </p>
                            <p v-else class="info_role_name">未设置</p>
                        </div>
                    </div>
                    <div class="border"></div>
                    <div class="versions">
                        <div class="setMeal">
                            <p>企业版本</p>
                            <p v-if="state.userInfo.base_info.package_name">
                                {{ state.userInfo.base_info.package_name }}
                            </p>
                            <p v-else>未设置</p>
                        </div>
                        <div class="type">
                            <img src="@/assets/image/account/free_icon.png" alt="" />
                        </div>
                        <div class="division"></div>
                        <div class="setMeal">
                            <p>套餐有效期</p>
                            <!--  :title="state.userInfo.base_info.package_start_time +'~' +state.userInfo.base_info.package_expire_time"-->
                            <p>
                                {{ state.userInfo.base_info.package_start_time }} ~
                                {{ state.userInfo.base_info.package_expire_time }}
                            </p>
                            <p v-show="!state.userInfo.base_info.package_start_time">未设置</p>
                        </div>
                    </div>
                    <div class="user_change">
                        <div class="user_btn">
                            <el-button v-auth="'CHANGE_PLAN'" type="primary" @click="changeInfo(1)">变更套餐</el-button>
                            <el-button v-auth="'EXPERIENCE_DELAY'" type="primary" plain @click="changeInfo(2)">
                                体验延期
                            </el-button>
                            <el-button v-auth="'RESET_PASSWORD'" @click="dialogFormVisible = true">修改密码</el-button>
                            <el-button @click="refreshFn">更新套餐信息</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="enterprise">
            <div class="enterprise_title">
                <div class="lable-name">企业信息</div>
                <el-button v-auth="'VERIFY_SUBJECT_INFORMATION'" @click="changeInfo(3)">验证主体信息</el-button>
            </div>
            <div class="enterprise_container">
                <div class="company">
                    <div class="plans">公司套餐</div>
                    <div v-if="state.userInfo.tenant_info.company_name" class="text">
                        {{ state.userInfo.tenant_info.company_name }}
                    </div>
                    <div v-show="!state.userInfo.tenant_info.company_name" class="text">未设置</div>
                    <div v-show="state.userInfo.tenant_info.verify_status === 0" class="tag"><span>未认证</span></div>
                    <div v-show="state.userInfo.tenant_info.verify_status === 1" class="tag"><span>审核中</span></div>
                    <div v-show="state.userInfo.tenant_info.verify_status === 3" class="tag"><span>未通过</span></div>
                    <div v-show="state.userInfo.tenant_info.verify_status === 2" class="tag"><span>已认证</span></div>
                </div>
                <div class="company">
                    <div class="plans">公司主体名称</div>
                    <div v-if="state.userInfo.tenant_info.company_body" class="text">
                        {{ state.userInfo.tenant_info.company_body }}
                    </div>
                    <div v-else class="text">未设置</div>
                </div>
                <div class="company">
                    <div class="plans">营业执照号</div>
                    <div v-if="state.userInfo.tenant_info.credit_no" class="text">
                        {{ state.userInfo.tenant_info.credit_no }}
                    </div>
                    <div v-else class="text">未设置</div>
                </div>
                <div v-if="state.userInfo.tenant_info.license_image" class="company operation">
                    <div class="plans">营业执照片</div>
                    <div class="picture">
                        <div class="demo-image__preview">
                            <el-image
                                alt=""
                                style="width: 100px; height: 100px"
                                :src="state.userInfo.tenant_info.license_image"
                                :preview-src-list="[state.userInfo.tenant_info.license_image]"
                                :preview-teleported="true"
                                :initial-index="0">
                            </el-image>
                        </div>
                        <div class="enlargement">
                            <img src="@/assets/image/account/enlargement.png" alt="" />
                        </div>
                    </div>
                </div>
                <div v-else class="company operation">
                    <div class="plans">营业执照片</div>
                    <div class="picture">
                        <span class="notUpload">未上传</span>
                    </div>
                </div>
                <div class="company">
                    <div class="plans">法人姓名</div>
                    <div v-if="state.userInfo.tenant_info.legal_person_name" class="text">
                        {{ state.userInfo.tenant_info.legal_person_name }}
                    </div>
                    <div v-else class="text">未设置</div>
                </div>
                <div class="company">
                    <div class="plans">法人手机号</div>
                    <div v-if="state.userInfo.tenant_info.legal_person_mobile" class="text">
                        {{ state.userInfo.tenant_info.legal_person_mobile }}
                    </div>
                    <div v-else class="text">未设置</div>
                </div>
            </div>
        </div>

        <div v-if="false" class="binding">
            <p class="binding_title">第三方账号绑定</p>
            <el-tabs v-model="account" class="tab" @tab-change="handleClick">
                <el-tab-pane label="企业微信" name="first">
                    <p class="number">企业微信绑定数量；4/5个</p>
                    <div class="companiesList">
                        <div v-for="index in 3" :key="index" class="companiesList_item">
                            <div class="companiesList_item_img">
                                <img src="" alt="" />
                            </div>
                            <div class="companiesList_item_name">
                                <div class="text">
                                    <p>企微名称</p>
                                    <p>众玩网络</p>
                                    <p><span>已认证</span></p>
                                </div>
                                <div class="text">
                                    <p>公司主体</p>
                                    <p>上海众玩网络公司</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="公众号" name="second">公众号</el-tab-pane>
                <el-tab-pane label="抖音蓝V账号" name="third">
                    <p class="number">企业微信绑定数量 0个</p>
                    <div class="empty">
                        <div class="empty_img"></div>
                        <p class="empty_text">您还没有绑定任何抖音蓝V账号</p>
                        <div class="empty_bind">去绑定</div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div v-if="false" class="binding">
            <p class="binding_title">企业信息</p>
            <el-tabs v-model="activeName" class="tab" @tab-change="handleClick">
                <el-tab-pane label="企业微信" name="1">
                    <p class="number">企业微信绑定数量；4/5个</p>
                    <div class="companiesList">
                        <div v-for="index in 3" :key="index" class="companiesList_item">
                            <div class="companiesList_item_img">
                                <img src="" alt="" />
                            </div>
                            <div class="companiesList_item_name">
                                <div class="text">
                                    <p>企微名称</p>
                                    <p>众玩网络</p>
                                    <p><span>已认证</span></p>
                                </div>
                                <div class="text">
                                    <p>公司主体</p>
                                    <p>上海众玩网络公司</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="公众号" name="2">公众号</el-tab-pane>
                <el-tab-pane label="抖音蓝V账号" name="3">
                    <p class="number">企业微信绑定数量 0个</p>
                    <div class="empty">
                        <div class="empty_img"></div>
                        <p class="empty_text">您还没有绑定任何抖音蓝V账号</p>
                        <div class="empty_bind">去绑定</div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 修改密码表单 -->
        <el-dialog v-model="dialogFormVisible" title="修改密码" class="dialog">
            <el-form
                ref="ruleFormRef"
                :model="resetForm"
                class="dialog_from"
                label-width="auto"
                :rules="rules"
                reset-fields>
                <el-form-item label="手机号">
                    <p>{{ state.userInfo.base_info.account }}</p>
                </el-form-item>
                <el-form-item label="验证码" prop="noteCode">
                    <el-input v-model="resetForm.noteCode" maxlength="6" type="text" placeholder="请输入验证码">
                        <template #suffix>
                            <div v-show="sendAuthCode" class="getCode" @click="getPhoneCode">获取验证码</div>
                            <div v-show="!sendAuthCode" class="getCode countDown">{{ autoTime }}s后重新获取</div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input
                        v-model="resetForm.newPassword"
                        minlength="6"
                        maxlength="20"
                        autocomplete="new-password"
                        type="password"
                        placeholder="请输入新的密码">
                    </el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmNewPassword">
                    <el-input
                        v-model="resetForm.confirmNewPassword"
                        minlength="6"
                        maxlength="20"
                        type="password"
                        autocomplete="off"
                        placeholder="请输入确认密码">
                    </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button class="" @click="cancel(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 展示体验延期二维码 -->
        <el-dialog v-model="changePackage" title="企业专属顾问" width="35%" center>
            <div class="qwQrCode">
                <img src="https://static.scrm.keyid.cn/assets/images/global/service.png" alt="" />
            </div>
            <p>扫描企微顾问，申请{{ package_text }}</p>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useStore } from '@/store';
import { getUserInfo } from '@/api/login';
import { ElMessage, ElForm } from 'element-plus';
import { noteCode, resetPasswordNote, resetPassword } from '@/api/login';
import { validatorPassword, validatorNote } from '@/utils/validate';
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
const store = useStore();
const account = ref('first');
const activeName = ref('1');
const dialogFormVisible = ref(false); // 修改密码表单
const qrCode = ref(false); // 体验延期二维码
const changePackage = ref(false); //变更套餐
const package_text = ref('');
const autoTime = ref(0);
const sendAuthCode = ref(true);

const resetForm: any = reactive({
    noteCode: '',
    newPassword: '',
    confirmNewPassword: ''
});
const handleClick = (tab: string, event: Event) => {};

const state = reactive({
    userInfo: {
        base_info: {
            user_name: '-',
            account: '-',
            role_name: '-',
            package_name: '-',
            package_start_time: '-'
        },
        ['tenant_info']: {
            ['company_name']: '未设置',
            ['company_body']: '未设置',
            ['verify_status']: null,
            ['license_image']: ''
        }
    }
});

// 短信
const note = (rule: any, value: any, callback: any) => {
    if (value == '') callback(new Error('请输入验证码'));
    else if (validatorNote(value)) {
        callback(new Error('验证码格式错误！'));
    } else {
        callback();
    }
};
// 密码验证
const password = (rule: any, value: any, callback: any) => {
    if (value == '') {
        callback(new Error('请输入新密码'));
    } else if (validatorPassword(value)) {
        callback(new Error('密码为6~20位字母+数字组合'));
    } else callback();
};
// 重复密码
const confirmPassword = (rule: any, value: any, callback: any) => {
    if (value == '') callback(new Error('请再次输入新密码'));
    else if (value !== resetForm.newPassword) {
        callback(new Error('输入密码不一致, 请重新输入！'));
    } else callback();
};
// 验证规则
const rules = reactive({
    noteCode: [{ validator: note, trigger: 'change' }],
    newPassword: [{ validator: password, trigger: 'change' }],
    confirmNewPassword: [{ validator: confirmPassword, trigger: 'change' }]
});

const params = {
    ['uth-token']: store.state.user.login_token
};
// 获取手机验证码
const getPhoneCode: () => void = () => {
    resetPasswordNote();
    sendAuthCode.value = false;
    autoTime.value = 60;
    const autoTimeTimer = setInterval(() => {
        autoTime.value--;
        if (autoTime.value <= 0) {
            sendAuthCode.value = true;
            clearInterval(autoTimeTimer);
        }
    }, 1000);
};
// 展示体验延期二维码
const changeInfo = (type: number) => {
    switch (type) {
        case 1:
            package_text.value = '变更套餐';
            break;
        case 2:
            package_text.value = '体验延期';
            break;
        case 3:
            package_text.value = '验证主体信息';
            break;
    }
    changePackage.value = true;
};
const cancel = (formEl: any) => {
    dialogFormVisible.value = false;
    if (!formEl) return;
    formEl.resetFields();
};
// 提交修改密码表单
const submitForm = (formEl: any) => {
    if (!formEl) return;
    formEl.validate(valid => {
        if (valid) {
            const { newPassword, confirmNewPassword, noteCode } = resetForm;
            const params = {
                new_password: newPassword,
                new_password_confirmation: confirmNewPassword,
                sms_code: noteCode
            };
            resetPassword(params)
                .then((data: any) => {
                    ElMessage.success('密码修改成功');
                    dialogFormVisible.value = false;
                })
                .catch((error: any) => {});
        } else {
            return false;
        }
    });
};
// 获取账号信息
getUserInfo(params).then((data: any) => {
    state.userInfo = data;
});

const refreshFn = async () => {
    await store.dispatch('menu/getMenu');
    await store.dispatch('user/getUserGlobalMenuFn');
    await store.dispatch('user/getAccountInfo');
};
</script>

<style lang="scss" scoped>
.layout {
    .user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 150px;
        border: 1px solid #eaeaea;
        background: #fff;
        &_info {
            display: flex;
            align-items: center;
            margin-left: 30px;
            &_left {
                display: flex;
                align-items: center;
                .avatar {
                    width: 100px;
                    height: 100px;
                    img {
                        width: 100px;
                    }
                }
                .info {
                    margin-left: 16px;
                    &_name {
                        display: flex;
                        align-items: center;
                        .name {
                            // width: 152px;
                            font-size: 16px;
                            line-height: 16px;
                            color: #33302d;
                            margin-right: 16px;
                        }
                        .qw_icon {
                            width: 22px;
                            height: 19px;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    &_phone {
                        // color: #696969;
                        font-size: 14px;
                        margin: 8px 0 31px;
                    }
                    &_role {
                        display: flex;
                        align-items: center;
                        &_icon {
                            width: 16px;
                            height: 16px;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        &_name {
                            margin-left: 8px;
                            font-size: 14px;
                            color: #696969;
                        }
                    }
                }
                .border {
                    height: 89px;
                    margin: 0 26px 0 66px;
                    border-left: 1px solid #eaeaea;
                }
                .user_change {
                    margin-left: 16px;
                }
                .versions {
                    width: auto;
                    height: 90px;
                    padding-right: 15px;
                    border: 1px solid #efefef;
                    display: flex;
                    align-items: center;
                    .setMeal {
                        margin-left: 15px;
                        font-size: 14px;
                        min-width: 60px;
                        & p:nth-child(1) {
                            color: #969696;
                        }
                        & p:nth-child(2) {
                            font-size: 12px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin-top: 14px;
                            color: #33302d;
                            max-width: 300px;
                            cursor: pointer;
                        }
                    }
                    .type {
                        margin-left: 10px;
                        img {
                            width: 64px;
                            height: 55px;
                        }
                    }
                    .division {
                        height: 50px;
                        margin-left: 26px;
                        border-left: 1px solid #eaeaea;
                    }
                }
            }
        }
        &_change {
            .user_btn {
                display: flex;
                margin-right: 50px;
                flex-wrap: wrap;
                gap: 12px;
                .el-button {
                    margin-left: 0 !important;
                }
                .btn_first {
                    color: #ffffff;
                    width: 75px;
                    background-color: #ff6b00;
                }
                .btn_second {
                    color: #ff6b00;
                    // margin: 0 16px;
                    border: 1px solid #ff6b00;
                }
                .btn_third {
                    // margin-right: 16px;
                    color: #33302d;
                    border: 1px solid #eaeaea;
                }
                .btn_four {
                    // margin-right: 16px;
                    color: #33302d;
                    border: 1px solid #eaeaea;
                }
            }
        }
    }
    .enterprise {
        height: 418px;
        margin-top: 16px;
        background: #ffffff;
        border: 1px solid #eaeaea;
        .enterprise_title {
            border-bottom: 1px solid #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 10px 10px 0px;

            .lable-name {
                color: #33302d;
                font-size: 16px;
                margin-left: 30px;
            }
        }
        .enterprise_container {
            margin: 20px 0 0 32px;
            .company {
                display: flex;
                align-items: center;
                margin-bottom: 23px;
                .plans {
                    width: 84px;
                    color: #33302d;
                    font-size: 14px;
                    margin-right: 50px;
                }
            }
            .operation {
                height: 100px;
                position: relative;
                .plans {
                    position: absolute;
                    top: 0;
                }
                .picture {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    top: 5px;
                    left: 127px;
                    background: #eaeaea;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    .notUpload {
                        display: flex;
                        justify-content: center;
                        line-height: 100px;
                        color: #696969;
                        font-size: 12px;
                    }
                    .enlargement {
                        width: 10px;
                        height: 10px;
                        background-size: 100%;
                        position: absolute;
                        top: 4px;
                        left: 86px;
                    }
                }
            }
            .text {
                color: #696969;
                font-size: 12px;
                margin-right: 8px;
            }

            .tag {
                width: 48px;
                height: 18px;
                color: #fff;
                text-align: center;
                line-height: 18px;
                border-radius: 10px;
                margin-right: 14px;
                span {
                    font-size: 12px;
                    transform: scale(0.5);
                }
                &:nth-child(4) {
                    background-color: #3e82f9;
                }
                &:nth-child(5) {
                    background-color: #ffa800;
                }
                &:nth-child(6) {
                    background-color: #fe292b;
                }
                &:nth-child(7) {
                    background-color: #60b900;
                }
            }
        }
    }
    .binding {
        min-height: 313px;
        margin-top: 16px;
        box-sizing: border-box;
        background: #fff;
        padding: 30px;
        border: 1px solid #eaeaea;
        &_title {
            font-size: 20px;
            line-height: 20px;
        }
        .tab {
            margin-top: 10px;
            .number {
                color: #33302d;
                font-size: 14px;
                line-height: 14px;
                margin: 4px 0 20px;
            }
            .companiesList {
                display: flex;
                &_item {
                    width: 380px;
                    height: 110px;
                    margin-right: 11px;
                    box-sizing: border-box;
                    border: 1px solid #eaeaea;
                    display: flex;
                    align-items: center;
                    padding-left: 14px;
                    &_img {
                        width: 80px;
                        height: 80px;
                        background: #eaeaea;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    &_name {
                        .text {
                            display: flex;
                            align-items: center;
                            & p:nth-child(1) {
                                width: 56px;
                                margin: 0 20px 0 14px;
                                color: #33302d;
                                font-size: 14px;
                                line-height: 14px;
                            }
                            & p:nth-child(2) {
                                color: #696969;
                                margin-right: 8px;
                            }
                            & p:nth-child(3) {
                                width: 48px;
                                height: 18px;
                                line-height: 18px;
                                border-radius: 10px;
                                color: #ffffff;
                                text-align: center;
                                background: #60b900;
                                span {
                                    font-size: 12px;
                                    transform: scale(0.5);
                                }
                            }
                            &:nth-child(1) {
                                margin-bottom: 26px;
                            }
                        }
                    }
                }
            }
            .empty {
                width: 207px;
                text-align: center;
                margin: 0 auto;
                .empty_img {
                    width: 75px;
                    height: 51px;
                    margin: 0 auto 10px;
                    background: url('@/assets/image/account/Group.png') no-repeat;
                    background-size: cover;
                }
                .empty_text {
                    color: #969696;
                    font-size: 15px;
                    line-height: 15px;
                    margin-bottom: 8px;
                }
                &_bind {
                    width: 98px;
                    height: 36px;
                    margin: 0 auto;
                    text-align: center;
                    line-height: 36px;
                    border-radius: 2px;
                    background: #ff6b00;
                    color: #ffffff;
                }
            }
            :deep .el-tabs__item.is-active {
                color: #ff6b00;
            }
            :deep .el-tabs__item {
                color: #696969;
            }
            :deep .el-tabs__active-bar {
                background: #ff6b00;
            }
        }
    }
    .dialog {
        .el-form-item {
            padding-bottom: 10px;
        }
        &_from {
            :deep .el-form-item__label {
                text-align: left;
            }
            .el-form-item {
                margin-bottom: 20px;
                :deep .el-input__icon.el-icon {
                    display: none;
                }
            }
        }
        &-footer {
            :deep .el-button {
                width: 64px;
                &:nth-child(2) {
                    background: #ff6b00;
                    border: 1px solid #ff6b00;
                }
            }
        }
    }
    :deep .el-dialog--center {
        border-radius: 30px;
    }
    :deep .el-dialog--center .el-dialog__body {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    :deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
        display: none;
    }
}
</style>
